<template>
    <el-tree :data="dataSource" node-key="id" default-expand-all :expand-on-click-node="false">
        <template #default="{ node, data }">
            <span class="custom-tree-node">
                <el-checkbox v-if="node.level !== 1" v-model="data.isSelect" size="large"
                    @change="changeBox(node, data, $event)" />
                <span class="test" @click="clickNode(node, data)">{{ node.label }}</span>
            </span>
        </template>
    </el-tree>
</template>

<script setup>
import { ref } from 'vue'
const dataSource = ref([
    {
        id: 1,
        label: '飞机',
        children: [
            {
                id: 4,
                label: '歼1',
                isSelect: false,
                children: [
                    {
                        id: 9,
                        label: '装备A',
                        isSelect: false,
                    },
                    {
                        id: 10,
                        label: '装备A',
                        isSelect: false,
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: '车辆',
        children: [
            {
                id: 5,
                label: '车1',
                isSelect: false,
                children: [
                    {
                        id: 35,
                        label: '装备A',
                        isSelect: false,
                    },
                    {
                        id: 36,
                        label: '装备AB',
                        isSelect: false,
                    },
                    {
                        id: 37,
                        label: '装备ABc',
                        isSelect: false,
                    }
                ]
            },
            {
                id: 6,
                label: '车2',
                isSelect: false,
            },
        ],
    },
    {
        id: 3,
        label: '船',
        children: [
            {
                id: 7,
                label: '船1',
                isSelect: false,
            },
            {
                id: 8,
                label: '船2',
                isSelect: false,
            },
        ],
    },
])
const clickNode = (node, data) => {
    console.log(node, data);
}
const changeBox = (node, data, e) => {
    console.log(node, data, e);
    //选择二级节点时候     子节点根据父节点的选中状态改变而改变
    if (node.level === 2) {
        if (data.children) {
            data.children.forEach(obj => {
                obj.isSelect = e;
            })
        }

    }


    //选择叶子节点时
    if (node.level === 3) {
        let utilSelect = false;
        if (node.parent.data.children) {
            node.parent.data.children.forEach(obj => {
                if (obj.isSelect) {
                    utilSelect = true
                }
            })
        }
        node.parent.data.isSelect = utilSelect
    }
    // console.log(dataSource);
    utils();

}
//处理数据
const utils = () => {
    const backData = JSON.parse(JSON.stringify(dataSource.value));
    let datas = [];
    backData.forEach(obj => {
        if (obj.children) {
            obj.children.forEach(item => {
                if (item.children && item.isSelect) {
                    console.log(item);
                    datas.push(item);
                }
            })
        }
    })
    datas.forEach(obj=>{
        obj.children = obj.children.filter(item=>{
            return item.isSelect
        })
    })
    console.log(datas);
    return datas;
}
</script>

<style lang="scss" scoped></style>